<template>
  <div class="com-container">
    <div class="com-chart" ref="hot"></div>
    <i
      class="el-icon-arrow-left left"
      :style="comStyle"
      @click="toleft"
    ></i>
    <i
      class="el-icon-arrow-right right"
      :style="comStyle"
      @click="toright"
    ></i>
    <p class="text" :style="textStyle" v-text="title"></p>
  </div>
</template>

<script>
import "../assets/js/essos.js";
export default {
  data() {
    return {
      allData: [],
      myCharts: null,
      currentIndex: 0,
      totalIndex: 0,
      titleFontSize: 0,
      title:'',
    };
  },
  methods: {
    //初始化报表
    async initCharts() {
      this.myCharts = this.$echarts.init(this.$refs.hot, "essos");
      //初始化报表配置项，与数据无关
      const initOptions = {
        title: {
          left: 20,
          top: 20,
          textStyle: {
            color: "#893448",
            // fontSize: 25,
          },
        },
        legend: {
          top: "15%",
          left: "right",
          icon: "circle",
        },
      };
      this.myCharts.setOption(initOptions);
      //获取数据
      const { data } = await this.$axios.get("http://localhost:3000/hotp");
      this.allData = data;
      this.totalIndex = this.allData.length - 1;
      this.createReports();
    },
    //点击左边按钮，currentIndex减1
    toleft() {
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.totalIndex;
      }
      this.createReports();
    },
    //点击右边按钮，currentIndex加1
    toright() {
      this.currentIndex++;
      if (this.currentIndex > this.totalIndex) {
        this.currentIndex = 0;
      }
      this.createReports();
    },
    //创建报表
    createReports() {
      const array = this.allData[this.currentIndex].children;

      const seriesData = array.map((item) => {
        return {
          name: item.name,
          value: item.value,
        };
      });
     this.title = this.allData[this.currentIndex].name;

      //报表数据样式等设计
      var dataOptions = {
        title: {
          text: `▎ 热销商品销售金额占比统计`,
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            center: ["50%", "60%"],
            hoverAnimation: false,
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            data: seriesData,
          },
        ],
      };
      this.myCharts.setOption(dataOptions);
    },
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      const titleFontSize = (this.$refs.hot.offsetWidth / 100) * 3.6;
      this.titleFontSize = titleFontSize;
      // 和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        legend: {
          itemWidth: titleFontSize/ 2,
          itemHeight: titleFontSize/ 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize/ 2,
          },
        },
        series: [
          {
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            type: "pie",
            radius: titleFontSize*4,
            center: ["50%", "60%"],
          },
        ],
      };
      this.myCharts.setOption(adapterOption);
      this.myCharts.resize();
    },
  },
  computed: {
    comStyle() {
      return {
        fontSize: this.titleFontSize*2 + "px",
        cursor: "pointer",       
      };
    },
    textStyle() {
      return {
        fontSize: this.titleFontSize + "px",     
      };
    },
  },
  mounted: function () {
    this.initCharts();
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
  },
};
</script>

<style>
.left {
  position: absolute;
  left: 10%;
   top:50%;
   font-weight: bold;
}

.right {
  position: absolute;
  right: 15%;
  top:50%;
  font-weight: bold;
}
.com-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.com-chart{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.text {
  position: absolute;
  left: 10%;
  top:70%;
  font-weight: bold;
  color: #d95850;
}
</style>